import React, { useState } from 'react'
import { Button, Form, DatePicker, Select, Table, Input, Row, Col, Modal, message, Menu, Spin, Badge } from 'antd';
import request from '@/http';
import { EditObject, Edit } from './Edit';
const { Option } = Select;
const { confirm } = Modal;


export default function index() {
    const [formObject] = Form.useForm();//获取数据

    
    const [currentEditObject, setCurrentEditObject] =
    React.useState<EditObject>({
      isModalVisible: false,
    });


    const tableTitle:any[]=[//数据表头
        {title:'批次名称',dataIndex:'batchName'},{title:'开始时间',dataIndex:'beginTime'},{title:'结束时间',dataIndex:'endTime'}
        ,{title:'课程',dataIndex:'courses'},{title:'学生',datatIndex:'users'},{title:'状态',dataIndex:'states',
        render: (states: any) => {
          return states=='启用'?<Badge color="green" text={states} />:<Badge color="gold" text={states} />;
        },}
        ,{title:'操作',
        render: (text:any, record:any) => (
          <>
            <Button type="link" onClick={async () => {
                await request.get('/api/Users/BanUsers?id='+text.id).then((response:any)=>{
                  message.success('编辑成功');
                  getData( 1, 5);
                  console.log(response);
                })
              }} >
                {text.state==0?'禁用':'启用'}
            </Button>
          <Button type="link" onClick={() => {
                    setCurrentEditObject({
                      isModalVisible: true,
                      ...record
                    });
                  }} >
            编辑
          </Button>
          </>
        ),
      }]

      const [pagination, setPagination] = React.useState({//分页器
        showSizeChanger: true,
        pageSizeOptions: ['5','10', '50', '200', '500'],
        showQuickJumper:true,
        defaultPageSize:5,
        showTotal:(total:any, current:any) => `共 ${total} 条记录  第 ${current[0]}~${current[1]}条`,
      });

      const userEditOnClose = async () => {
        getData( 1, 5);
      };

      const [dataSource, setDataSource] = React.useState<any[]>();//数据集合
      const getData=async (   
        pageValue: any,
        pageSizeValue: any                        
        ) => {
          await request.get('/api/Batch/GetAllBatch').then((response:any)=>{
            if(response.code==200){
              console.log(response.data[1].courses)
              const data=response.data.map((item:any,index:number)=>({
                key:index,
                "batchName":item.batchName,
                "beginTime": item.beginTime,
                // "courses":item.courses,
                "endTime":item.endTime,
                "id":item.id,
                "states": item.states,
                "state":item.state
                // "users":item.users
            }))
                const newPageObject = {
                  ...pagination,
                  // current: pageValue,
                  // pageSize: pageSizeValue,
                };
                setPagination(newPageObject);
                setDataSource(data)
                setspinning(false)
            }else{
              message.error(response.message)
              setspinning(false)
            }
            })
      }
    React.useEffect(()=>{
      getData( 1, 5);
    },[])
    const [spinning, setspinning] = useState(true);
    return (
      <Spin spinning={spinning} size="large">
        <>
            <Row style={{marginTop:30}} justify="center">
                {/* <Col span={22}> */}
                {/* <Form
                        className="ant-advanced-search-form"
                        form={formObject}
                        onFinish={async (values:any)=>{
                          setspinning(true)
                          await request.post('/api/Batch/GetAllCourse',{role:1,state:values.state,userName:values.userName,userSex:values.userSex,userTelphone:values.userTelphone,account:values.account}).then((response:any)=>{
                            if(response.code==200){
                              const data=response.data.map((item:any,index:number)=>({
                                key:index,
                                "batchName":item.batchName,
                                "beginTime": item.beginTime,
                                "courses": item.courses,
                                "endTime":item.endTime,
                                "id":item.id,
                                "states": item.states,
                                "state":item.state,
                                "users":item.users
                              }))
                              // const newPageObject = {
                              //   ...pagination,
                              //   current: pageValue,
                              //   pageSize: pageSizeValue,
                              // };
                              // setPagination(newPageObject);
                              setDataSource(data)
                              setspinning(false)
                              message.success(response.message);
                            }else{
                              setspinning(false)
                              message.success(response.message);
                            }
                          })
                        }}
                        >
                    </Form> */}
                {/* </Col> */}
                <Col span={22} offset={1}>
                    <Button style={{ marginBottom: '10px' }} type="primary" onClick={() => {
                      setCurrentEditObject({
                        isModalVisible: true,
                      });
                    }}
                    >新增批次</Button>
                    <Table
                        columns={tableTitle}
                        dataSource={dataSource}
                        pagination={pagination}
                        // onChange={pageOnChange}//分页、排序、筛选变化时触发(用以重新获取数据)
                        tableLayout="fixed"
                        
                    />
                </Col>
            </Row>
            <Edit editObject={currentEditObject} onClose={userEditOnClose}></Edit>
        </>
        </Spin>
    )
}